<template>
	<view>
		<!-- <u-navbar  title="员工录入" :is-back="false"   titleColor="#000">
		</u-navbar> -->
		<view class="wrap">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120" :label-position="labelPosition" label="姓名" prop="realname">
					<u-input :border="border" placeholder="请输入姓名" v-model="model.realname" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="性别" prop="gender">
					<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="genderText" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
				</u-form-item>
				
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  :label-position="labelPosition" label="手机号码" prop="mobile" label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="部门" prop="bumen" label-width="150">
					<u-input :border="border" type="select" :select-open="bumenselectShow" v-model="model.bumen" placeholder="请选择所在部门" @click="bumenselectShow = true"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="职位" prop="job">
					<u-input :border="border" placeholder="请输入职位" v-model="model.job" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="入职时间" prop="entry_time">
					<u-input :border="border" placeholder="请输入入职时间" v-model="model.entry_time" @click="entry_timeshow=true"  type="text"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="转正时间" prop="regular_time">
					<u-input :border="border" placeholder="请输入转正时间" v-model="model.regular_time" @click="regular_timeshow=true"  type="text"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="出生日期" prop="birthday">
					<u-input :border="border" placeholder="请输入出生日期" v-model="model.birthday" @click="birthdayshow=true"  type="text"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="上传头像" prop="avatar" label-width="150">
					<u-upload :file-list="avatarfileList" @on-remove="model.avatar=''" :action="baseurl+action" name="file" :auto-upload="true" v-on:on-success="avatarResult"  width="160"  height="160" max-count="1" :max-size="1 * 1024 * 1024" ></u-upload>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="民族" prop="nation">
					<u-input :border="border" placeholder="请输入民族" v-model="model.nation" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="学历" prop="education" label-width="150">
					<u-input  v-if="model.education =='' || model.education==null "  :border="border" type="select" :select-open="educationselectShow"  placeholder="请选择学历" @click="educationselectShow = true"></u-input>
					<u-input v-else :border="border" type="select" :select-open="educationselectShow" v-model="educationselectList[model.education].label" placeholder="请选择学历" @click="educationselectShow = true"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="毕业院校" prop="graduate">
					<u-input :border="border" placeholder="请输入毕业院校" v-model="model.graduate" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="专业" prop="major">
					<u-input :border="border" placeholder="请输入专业" v-model="model.major" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="身份证" prop="identity">
					<u-input :border="border" placeholder="请输入身份证" v-model="model.identity" type="number"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="婚姻" prop="marriage" label-width="150">
					<u-input :border="border" type="select" :select-open="marriageselectShow" v-model="marriageText" placeholder="请选择学历" @click="marriageselectShow = true"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="籍贯" prop="jiguan" label-width="150">
					<u-input :border="border" type="select" :select-open="jiguanpickerShow" v-model="model.jiguan" placeholder="请选择地区" @click="jiguanpickerShow = true"></u-input>
				</u-form-item>
				
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}"  label-width="120" :label-position="labelPosition" label="紧急联系人" prop="urgent">
					<u-input :border="border" placeholder="请输入紧急联系人" v-model="model.urgent" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" :label-position="labelPosition" label="联系人手机号码" prop="urgent_mobile" label-width="150">
					<u-input :border="border" placeholder="请输入联系人手机号码" v-model="model.urgent_mobile" type="number"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="上传毕业证"  label-width="150">
					<u-upload  :file-list="diploma_imagefileList" @on-remove="model.diploma_image=''" :action="baseurl+action" name="file" :auto-upload="true" v-on:on-success="diploma_imageResult" width="160" height="160" :max-size="2 * 1024 * 1024" max-count="1"></u-upload>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="上传学位证"  label-width="150">
					<u-upload   :file-list="academic_imagefileList" @on-remove="model.academic_image=''" :action="baseurl+action" name="file" :auto-upload="true" v-on:on-success="academic_imageResult" width="160" height="160" :max-size="2 * 1024 * 1024" max-count="1"></u-upload>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="上传教师资格证"  label-width="150">
					<u-upload   :file-list="teach_imagefileList" @on-remove="model.teach_image=''" :action="baseurl+action" name="file" :auto-upload="true" v-on:on-success="teach_imageResult" width="160" height="160" :max-size="2 * 1024 * 1024" max-count="1"></u-upload>
				</u-form-item>
				

			</u-form>
			<u-button @click="submit" shape="circle" class="submit">提交</u-button>
			<!-- 性别 -->
			<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
			<!-- 部门选择 -->
			<u-select mode="single-column" :list="bumenselectList" v-model="bumenselectShow" @confirm="bumenselectConfirm"></u-select>
			<!-- 学历选择 -->
			<u-select mode="single-column" :list="educationselectList" v-model="educationselectShow" @confirm="educationselectConfirm"></u-select>
			<!-- 婚姻选择 -->
			<u-action-sheet  :list="marriageselectList" v-model="marriageselectShow" @click="marriageselectConfirm"></u-action-sheet>
			
			<!-- 入职时间 -->
			<u-calendar v-model="entry_timeshow" mode="date" @change="entry_timechange"></u-calendar>
			<!-- 转正时间 -->
			<u-calendar v-model="regular_timeshow" mode="date" @change="regular_timechange"></u-calendar>
			<!--  -->
			<u-calendar v-model="birthdayshow" mode="date" @change="birthdaychange"></u-calendar>
			<!-- 籍贯选择 -->
			<u-picker mode="region" v-model="jiguanpickerShow" :params="{province:true}" @confirm="jiguanConfirm"></u-picker>
				
				
				<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {		
		components:{
			
		},
		data() {
			return {
			//上传图片地址
			baseurl:"",
			action: '/api/member/userupload',
			avatarfileList: [],
			diploma_imagefileList:[],
			academic_imagefileList:[],
			teach_imagefileList:[],
			model: {
				realname: '',
				mobile: '',	
				gender: '',
				bumen:'',
				job:'',
				entry_time:'',
				regular_time:'',
				birthday:'',
				avatar:'',
				nation:'',//民族
				education:0,//学历
				graduate:'',//毕业院校
				major:'',//所学专业
				identity:'', //身份证
				marriage:'',//婚姻状况
				jiguan:'', //籍贯省
				urgent:'',
				urgent_mobile:'',//紧急联系人电话号码
			},
			marriageText:'',//婚姻状况
			genderText:"", //性别状况
			bumenselectList: [
				{
					value: '1',
					label: '网路部'
				},
				{
					value: '2',
					label: '教学部'
				},
				{
					value: '3',
					label: '人力部门'
				}
			],
			//学历
			educationselectList:[
				{
					value: '1',
					label: '高中以下'
				},
				{
					value: '2',
					label: '大专'
				},
				{
					value: '3',
					label: '本科'
				},
				{
					value: '4',
					label: '硕士'
				},
				{
					value: '5',
					label: '博士'
				}
			],
			//婚姻
			marriageselectList:[
				{
					value: '1',
					text: '未婚'
				},
				{
					value: '2',
					text: '已婚'
				},
				{
					value: '3',
					text: '离异'
				}
			],

			rules: {
				realname: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'blur' ,
					},
					{
						min: 2,
						max: 5,
						message: '姓名长度在2到5个字符',
						trigger: ['change','blur'],
					},
					{
						pattern: /^[\u4e00-\u9fa5]+$/gi,
						message: '姓名只能为中文',
						trigger: 'change',
					}
				],
				job:[
					{
						required: true,
						message: '请输入职位',
						trigger: 'blur' ,
					},
				],
				// nation:[
				// 	{
				// 		required: true,
				// 		message: '请输入民族',
				// 		trigger: 'blur' ,
				// 	},
				// ],
				identity:[
					{
						required: true,
						message: '请输入身份证',
						trigger: 'blur' ,
					},
					// 正则判断为字母或数字
					{
						pattern: /^\d{17}(\d|X)$/gi,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '输入正确的身份证号'
					}
				],
				// urgent_mobile: [
				// 	{
				// 		required: true,
				// 		message: '请输入紧急联系人手机号',
				// 		trigger: ['change','blur'],
				// 	},
				// 	{
				// 		validator: (rule, value, callback) => {
				// 			// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
				// 			return this.$u.test.mobile(value);
				// 		},
				// 		message: '手机号码不正确',
				// 		// 触发器可以同时用blur和change，二者之间用英文逗号隔开
				// 		trigger: ['change','blur'],
				// 	}
				// ],	
				jiguan: [
					{
						required: true,
						message: '请选择籍贯',
						trigger: 'change',
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change','blur'],
					}
				]
			},
			border: false,
			actionSheetList: [
				//0女 1男
				{
					text: '女'
				},
				{
					text: '男'
				}
			],
			actionSheetShow: false, //性别下拉展示
			jiguanpickerShow:false,  //籍贯
			bumenselectShow: false,
			educationselectShow: false,//学历下拉选择
			marriageselectShow: false,//婚姻下拉选择
			entry_timeshow:false,  //入职时间弹框
			regular_timeshow:false, //转正时间
			birthdayshow:false,//生日
			labelPosition: 'top',
			errorType: ['message'],
			
			}
		},
		onLoad() {
			    this.baseurl =  this.$u.http.config.baseUrl
			    //部门
				this.$u.post('/api/member/bumenlist', {
						}).then(res => {
					    this.bumenselectList = res;			
				});	
				
				//用户信息
			    this.$u.post('/api/member/getUserInfo').then(res => {
						  this.model = res
						  console.log(this.model);
						  
						  console.log(this.model,this.model.education);
						  let userinfo = res
						  if(userinfo.avatar){
							this.avatarfileList = [{
								url:this.baseurl+userinfo.avatar
							}]
						  }
						  if(userinfo.diploma_image){
							this.diploma_imagefileList = [{
								url:this.baseurl+userinfo.diploma_image
							}]
						  }
						  if(userinfo.academic_image){
							this.academic_imagefileList = [{
								url:this.baseurl+userinfo.academic_image
							}]
						  }
						  if(userinfo.teach_image){
								this.teach_imagefileList = [{
									url:this.baseurl+userinfo.teach_image
								}]
						  }
						  //性别
						  this.actionSheetCallback(userinfo.gender)
						  //婚姻
						  this.marriageselectConfirm(userinfo.marriage)
			    }); 
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//上传头像
			avatarResult(e){
				if(e.code == 1){
					this.model.avatar = e.data.url;
				}
			},
			//上传毕业证
			diploma_imageResult(e){
				if(e.code == 1){
					this.model.diploma_image = e.data.url;
				}
			},
			//上传学位证
			academic_imageResult(e){
				if(e.code == 1){
					this.model.academic_image = e.data.url;
				}
			},
			//上传学位证
			teach_imageResult(e){
				if(e.code == 1){
					this.model.teach_image = e.data.url;
				}
			},
			//提交
			 submit() {
				let that  = this; 
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.$u.post('/api/member/updeteuser',that.model
						).then(res => {
									that.$u.toast("修改成功");
						});
						
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			 },
	     	//---性别---回调
			actionSheetCallback(index) {
				//this.model.gender = this.actionSheetList[index].text;
				let actionSheetList =  this.actionSheetList
				if(actionSheetList[index]){
					this.model.gender = index;
					this.genderText = actionSheetList[index].text
					uni.hideKeyboard();
				}

			},
			//部门选择
			bumenselectConfirm(e) {
				this.model.bumen = '';		
				e.map((val, index) => {
					this.model.bumen += this.model.bumen == '' ? val.label : '-' + val.label;
					
				})
				this.model.bumen_id  = e[0].value
				console.log(this.model.bumen_id);
			},
			//学历选择
			educationselectConfirm(e) {
				this.model.education = '';
				console.log(e);
				e.map((val, index) => {
					this.model.education += this.model.education == '' ? val.value : '-' + val.value;
				})
			},
			//婚姻状况
			marriageselectConfirm(index) {
				let genderlist = this.marriageselectList
				if(genderlist[index]){
					uni.hideKeyboard();
					//this.model.gender = this.actionSheetList[index].text;
					this.marriageText = genderlist[index].text
					this.model.marriage = index;
				}
			},
			//入职回调
			entry_timechange(e){
				if(e.result){
					this.model.entry_time
				}
			},
			//转正回调
			regular_timechange(e){
				if(e.result){
					this.model.regular_time
				}
			},
			//生日回调
			birthdaychange(e){
				this.model.birthday=e.result
			},
			// 选择籍贯地区回调
			jiguanConfirm(e) {
				this.model.jiguan = e.province.label;
			},
			//上传图片
			async beforeUpload(index, list) {
							// await等待一个请求，请求回来后再返回true，继续上传文件
							//console.log(list);
							//let data = await this.$u.post('url');
							return false; // 或者根据逻辑返回false
		    },
			borderChange(index) {
				this.border = !index;
			},
			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
		}
	}
</script>

<style lang="scss" scoped>
  .wrap {
  	padding: 30rpx;
  }
  
  .agreement {
  	display: flex;
  	align-items: center;
  	margin: 40rpx 0;
  
  	.agreement-text {
  		padding-left: 8rpx;
  		color: $u-tips-color;
  	}
  }
  
  .submit{
	  background: #2165F7;
	  color: #fff;
  }
</style>
